import React, { Component } from 'react';
import { Chart, Geom, Coord, Shape } from 'bizcharts';
import DataSet from '@antv/data-set';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import classNames from 'classnames';
import autoHeight from '../autoHeight';
import styles from './index.less';

/* eslint no-underscore-dangle: 0 */
/* eslint no-param-reassign: 0 */

const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';

@autoHeight()
class TagCloud extends Component {
  state = {
      dv: null,
  };

  componentDidMount() {
      this.initTagCloud();
      this.renderChart();
      window.addEventListener('resize', this.resize);
  }

  componentWillReceiveProps(nextProps) {
      if (JSON.stringify(nextProps.data) !== JSON.stringify(this.props.data)) {
          this.renderChart(nextProps);
      }
  }

  componentWillUnmount() {
      this.isUnmount = true;
      window.removeEventListener('resize', this.resize);
  }

  resize = () => {
      this.renderChart();
  };

  saveRootRef = (node) => {
      this.root = node;
  };

  initTagCloud = () => {
      function getTextAttrs(cfg) {
          return Object.assign(
              {},
              {
                  fillOpacity: cfg.opacity,
                  fontSize: cfg.origin._origin.size,
                  rotate: cfg.origin._origin.rotate,
                  text: cfg.origin._origin.text,
                  textAlign: 'center',
                  fontFamily: cfg.origin._origin.font,
                  fill: cfg.color,
                  textBaseline: 'Alphabetic',
              },
              cfg.style
          );
      }

      // 给point注册一个词云的shape
      Shape.registerShape('point', 'cloud', {
          drawShape(cfg, container) {
              const attrs = getTextAttrs(cfg);
              return container.addShape('text', {
                  attrs: Object.assign(attrs, {
                      x: cfg.x,
                      y: cfg.y,
                  }),
              });
          },
      });
  };

  @Bind()
  @Debounce(500)
  renderChart(nextProps) {
      // const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
      const { data, height } = nextProps || this.props;

      if (data.length < 1 || !this.root) {
          return;
      }

      const h = height * 4;
      const w = this.root.offsetWidth * 4;

      const onload = () => {
          const dv = new DataSet.View().source(data);
          const range = dv.range('value');
          const [min, max] = range;
          dv.transform({
              type: 'tag-cloud',
              fields: ['name', 'value'],
              imageMask: this.imageMask,
              font: 'Verdana',
              size: [w, h], // 宽高设置最好根据 imageMask 做调整
              padding: 5,
              timeInterval: 5000, // max execute time
              rotate() {
                  return 0;
              },
              fontSize(d) {
                  // eslint-disable-next-line
          return Math.pow((d.value - min) / (max - min), 2) * (70 - 20) + 20;
              },
          });

          if (this.isUnmount) {
              return;
          }

          this.setState({
              dv,
              w,
              h,
          });
      };

      if (!this.imageMask) {
          this.imageMask = new Image();
          this.imageMask.crossOrigin = '';
          this.imageMask.src = imgUrl;

          this.imageMask.onload = onload;
      } else {
          onload();
      }
  }

  render() {
      const { className, height } = this.props;
      const { dv, w, h } = this.state;

      return (
          <div
              className={classNames(styles.tagCloud, className)}
              style={{ width: '100%', height }}
              ref={this.saveRootRef}
          >
              {dv && (
                  <Chart
                      width={w}
                      height={h}
                      data={dv}
                      padding={0}
                      scale={{
                          x: { nice: false },
                          y: { nice: false },
                      }}
                  >
                      <Coord reflect="y" />
                      <Geom type="point" position="x*y" color="text" shape="cloud" />
                  </Chart>
              )}
          </div>
      );
  }
}

export default TagCloud;
